<template>
  <div>
    <ul class="nav clear">
      <li id="logo">
        <h3>版权云下架平台</h3>
      </li>
      <router-link tag="li" :to="{path:'/list'}">任务列表</router-link>
      <router-link tag="li" :to="{path:'/mine'}">我的列表</router-link>
      <router-link tag="li" :to="{path:'/statistics'}">任务统计</router-link>
      <li id="order">退出</li>
    </ul>

    <div class="const">
      <router-view></router-view>

    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>
<style lang="scss" scoped>
  .clear:after {
    display: block;
    clear: both;
    content: '';
  }

  .nav {
    height: 50px;
    width: 100%;
    background-color: #2A303C;
    #logo {
      color: #3D75C9;
      margin-left: 30px;
    }
    li {
      float: left;
      margin-right: 50px;
      font-size: 15px;
      line-height: 50px;
      color: #fff;
    }
    #order {
      float: right;
    }
  }

  .const {
    width: calc(100% - 40px);
    height: calc(100vh - 90px);
    background-color: #F8F8F8;
    padding: 20px;
  }
</style>
